<template>
    <el-row>
        <el-col :span="2">
            <el-button  @click="handleAddClick" type="success">添加</el-button>
        </el-col>
        <el-col :span="2">
              <el-button  @click="loadData"><el-icon><Refresh /></el-icon></el-button>
        </el-col>
          <el-col :span="20">
              <el-form  :inline="true" :model="state.search" label-width="120px">
                  <el-form-item label="提示">
                  <el-input v-model="state.search.tip" placeholder="根据提示搜索" />
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="onSearch">搜索</el-button>
                   </el-form-item>
                  </el-form>
          
          </el-col>
    </el-row>

    <el-divider />

   <el-table
    :data="state.lists"
    style="width: 560px"
    :row-class-name="tableRowClassName"
  >
  <el-table-column  prop="id" label="ID"/>
  <el-table-column  prop="group_name" label="分组名"/>
  <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="info" size="small" @click="handleShow(scope.row,scope.$index)"
            >查看</el-button>
          <el-button link type="primary" size="small" @click="handleEditClick(scope.row,scope.$index)"
            >修改</el-button>
          <el-button link type="danger" size="small" @click="handleDelClick(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
</template>

<script setup>

import {ref,reactive,onMounted,watch} from 'vue';
import {CircleCloseFilled,Refresh} from '@element-plus/icons-vue';
import {index,del,create} from '../../api/config_group.js';
import {useRouter} from 'vue-router';
const state = reactive({
    lists:[],
    total:0,
    form:{},
    search:{}
});

const visible = ref(false);
const edit_visible = ref(false);
const ruleRef = ref();
const router = useRouter();
onMounted(()=>{
  loadData();
})
const loadData = ()=>{
  let searchData = state.search;
  index(searchData).then(res=>{
      if(res.code == 200) {
        state.lists = res.data.group;
      }
  })
}

const handleEditClick=(item,index)=>{
      visible.value = true;
      state.form = item;
}

const handleDelClick=(item,index)=>{
      ElMessageBox.confirm("确定删除吗?","删除提示?").then(res=>{
          del({id:item.id}).then(()=>{
          if(res.code == 200) {
            ElMessage({
              message:"删除成功",
              type:"success"
            });
          }
          state.lists.splice(index,1);
        })
         
      })
}
const onSubmit = ()=>{
  create(state.form).then(res=>{
      if(res.code == 200) {
        ElMessage({
          message:"添加成功",
          type:"success"
        });
        loadData()
      } else {
        ElMessage({
          message:res.message,
          type:"warning"
        });
      }
    })
}
const onSearch=()=>{
  loadData();
}
const handleShow=(item)=>{
  router.push('/config/lists?group_id='+item.id);
}

</script>

<style>

</style>